<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <title>9宫格图表布局（纯HTML）</title>
  <style>
    /* 全局样式重置 */
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
      border: 2px solid blue; /* 辅助查看边框，可删除 */
    }
    body {
      background: #fff;
      margin: 10px;
    }

    /* 顶部布局 */
    .top {
      display: flex;
      height: 60px;
      background: orange;
      align-items: center;
      padding: 0 10px;
    }
    .top-left {
      flex: 1;
      color: red;
      font-size: 20px;
    }
    .top-right {
      position: relative; /* 下拉菜单父容器需相对定位 */
    }
    .dropdown-btn {
      background: blue;
      color: #fff;
      border: none;
      padding: 5px 10px;
      cursor: pointer;
    }
    .dropdown-menu {
      display: none;
      position: absolute;
      top: 30px;
      right: 0;
      background: orange;
      border: 2px solid blue;
      width: 80px;
    }
    .dropdown-menu div {
      padding: 5px;
      color: #fff;
      cursor: pointer;
      border-bottom: 1px solid #fff;
    }
    .top-right:hover .dropdown-menu {
      display: block;
    }

    /* 九宫格布局 */
    .grid-container {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      grid-gap: 10px;
      margin: 10px 0;
    }
    .grid-item {
      background: orange;
      height: 200px; /* 图表高度，可调整 */
    }

    /* 底部布局 */
    .bottom {
      height: 60px;
      background: blue;
    }
  </style>
  <!-- 引入 ECharts -->
  <script src="https://cdn.jsdelivr.net/npm/echarts/dist/echarts.min.js"></script>
</head>
<body>
  <!-- 顶部区域 -->
  <div class="top">
    <div class="top-left">1</div>
    <div class="top-right">
      <button class="dropdown-btn">菜单</button>
      <div class="dropdown-menu">
        <div>菜单1</div>
        <div>菜单2</div>
        <div>菜单3</div>
        <div>菜单4</div>
      </div>
    </div>
  </div>

  <!-- 九宫格区域 -->
  <div class="grid-container">
    <div class="grid-item" id="chart1"></div>
    <div class="grid-item" id="chart2"></div>
    <div class="grid-item" id="chart3"></div>
    <div class="grid-item" id="chart4"></div>
    <div class="grid-item" id="chart5"></div>
    <div class="grid-item" id="chart6"></div>
    <div class="grid-item" id="chart7"></div>
    <div class="grid-item" id="chart8"></div>
    <div class="grid-item" id="chart9"></div>
  </div>

  <!-- 底部区域 -->
  <div class="bottom"></div>

  <script>
    // 🔥 模拟后端接口返回的 9 个图表数据（可替换为真实接口请求）
    const mockChartData = [
      {
        type: 'line', // 折线图
        xAxis: ["Mon", "Tue", "Wed", "Thu", "Fri"],
        yAxis: [200, 220, 180, 210, 250]
      },
      {
        type: 'line', // 面积图（基于折线，开启 areaStyle）
        xAxis: ["Jan", "Feb", "Mar", "Apr", "May"],
        yAxis: [300, 320, 280, 310, 350],
        isArea: true
      },
      {
        type: 'bar', // 柱状图
        xAxis: ["A", "B", "C", "D", "E"],
        yAxis: [100, 150, 120, 180, 200]
      },
      {
        type: 'pie', // 饼图
        data: [
          {"value": 100, "name": "类别1"},
          {"value": 200, "name": "类别2"},
          {"value": 150, "name": "类别3"}
        ]
      },
      {
        type: 'scatter', // 散点图
        points: [[10, 20], [30, 40], [50, 30], [70, 60]]
      },
      {
        type: 'radar', // 雷达图
        indicator: [
          { name: '指标1', max: 100 },
          { name: '指标2', max: 100 },
          { name: '指标3', max: 100 }
        ],
        data: [[80, 60, 70]]
      },
      {
        type: 'boxplot', // 箱线图
        xAxis: ["Group1"],
        yAxis: [[50, 60, 70, 80, 90]]
      },
      {
        type: 'funnel', // 漏斗图
        data: [
          { value: 200, name: '步骤1' },
          { value: 150, name: '步骤2' },
          { value: 100, name: '步骤3' }
        ]
      },
      {
        type: 'gauge', // 仪表盘
        data: [ { value: 70, name: '完成率' } ]
      }
    ];

    // 封装：根据数据渲染 ECharts 图表
    function renderChart(domId, data) {
      const dom = document.getElementById(domId);
      const myChart = echarts.init(dom);
      let option = {};

      // 根据图表类型配置 ECharts
      switch (data.type) {
        case 'line':
          option = {
            xAxis: { type: 'category', data: data.xAxis },
            yAxis: { type: 'value' },
            series: [{
              type: 'line',
              data: data.yAxis,
              areaStyle: data.isArea ? {} : null, // 区分折线/面积图
              smooth: true
            }]
          };
          break;
        case 'bar':
          option = {
            xAxis: { type: 'category', data: data.xAxis },
            yAxis: { type: 'value' },
            series: [{
              type: 'bar',
              data: data.yAxis,
              itemStyle: { color: '#66B2FF' }
            }]
          };
          break;
        case 'pie':
          option = {
            series: [{
              type: 'pie',
              radius: ['40%', '70%'],
              data: data.data
            }]
          };
          break;
        case 'scatter':
          option = {
            xAxis: { type: 'value' },
            yAxis: { type: 'value' },
            series: [{
              type: 'scatter',
              data: data.points
            }]
          };
          break;
        case 'radar':
          option = {
            radar: { indicator: data.indicator },
            series: [{
              type: 'radar',
              data: data.data
            }]
          };
          break;
        case 'boxplot':
          option = {
            xAxis: { type: 'category', data: data.xAxis },
            yAxis: { type: 'value' },
            series: [{
              type: 'boxplot',
              data: data.yAxis
            }]
          };
          break;
        case 'funnel':
          option = {
            series: [{
              type: 'funnel',
              data: data.data
            }]
          };
          break;
        case 'gauge':
          option = {
            series: [{
              type: 'gauge',
              data: data.data
            }]
          };
          break;
        default:
          console.error('未知图表类型');
      }

      myChart.setOption(option);
    }

    // 页面加载后，渲染 9 个图表
    window.onload = () => {
      mockChartData.forEach((data, index) => {
        const chartId = index + 1;
        renderChart(`chart${chartId}`, data);
      });
    };
  </script>
</body>
</html>